#@layout()
#define main()
<div class="">
    <div class="container">
        #@mirrorBody()
        <div class="row">
            <div class="col-lg-8">
                <input type="button" onclick="json()" value="格式化" class="btn btn-primary"/>
            </div>
            <div class="col-lg-8">
                <span id="error"></span>
            </div>
        </div>
    </div>
</div>
#end

#define script()
#@mirror()
<script>
    var editor = null;
    $(function(){
        editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,
            name: "javascript",
            json: true,
            theme:"darcula"
        });

    })

    function json(){
        var json = editor.getValue();
        var formatStr = format(json,false);
        editor.setValue(formatStr);
    }

    function format(txt, compress) {
        var indentChar = '    ';
        if (/^\s*$/.test(txt)) {
            $("#error").html('数据为空,无法格式化! ');
            return;
        }
        try {
            var data = eval('(' + txt + ')');
        } catch (e) {
            $("#error").html('数据源语法错误,格式化失败! 错误信息: ' + e.message);
            return;
        }
        var draw = [],
            last = false,
            This = this,
            line = compress ? '' : '\n',
            nodeCount = 0,
            maxDepth = 0;

        var notify = function (name, value, isLast, indent, formObj) {
            nodeCount++; /*节点计数*/
            for (var i = 0, tab = ''; i < indent; i++)
                tab += indentChar; /* 缩进HTML */
            tab = compress ? '' : tab; /*压缩模式忽略缩进*/
            maxDepth = ++indent; /*缩进递增并记录*/
            if (value && value.constructor == Array) {
                /*处理数组*/
                draw.push(
                    tab + (formObj ? '"' + name + '":' : '') + '[' + line
                ); /*缩进'[' 然后换行*/
                for (var i = 0; i < value.length; i++)
                    notify(i, value[i], i == value.length - 1, indent, false);
                draw.push(
                    tab + ']' + (isLast ? line : ',' + line)
                ); /*缩进']'换行,若非尾元素则添加逗号*/
            } else if (value && typeof value == 'object') {
                /*处理对象*/
                draw.push(
                    tab + (formObj ? '"' + name + '":' : '') + '{' + line
                ); /*缩进'{' 然后换行*/
                var len = 0,
                    i = 0;
                for (var key in value)
                    len++;
                for (var key in value)
                    notify(key, value[key], ++i == len, indent, true);
                draw.push(
                    tab + '}' + (isLast ? line : ',' + line)
                ); /*缩进'}'换行,若非尾元素则添加逗号*/
            } else {
                if (typeof value == 'string') value = '"' + value + '"';
                draw.push(
                    tab +
                    (formObj ? '"' + name + '":' : '') +
                    value +
                    (isLast ? '' : ',') +
                    line
                );
            }
        };
        var isLast = true,
            indent = 0;
        notify('', data, isLast, indent, false);
        return draw.join('');
    }
</script>
#end